<div class="register-all">
  <form nz-form class="register-form" [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <div>
      <h1 class="login-all-title">用户注册</h1>
    </div>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="account">邮箱</nz-form-label>
      <nz-form-control [nzSm]="18" [nzXs]="24" [nzErrorTip]="accountTpl">
        <input nz-input formControlName="account" id="account"
               (blur)="verifyAccount()"
               (keydown)="keydown()"
        />
        <ng-template #accountTpl let-control>
          <ng-container *ngIf="control.hasError('required')||control.hasError('email')">
            你输入的电子邮箱格式不正确!
          </ng-container>
          <ng-container *ngIf="control.hasError('confirm')">
            你输入的账号已经存在了！
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="captcha" nzRequired>验证码</nz-form-label>
      <nz-form-control
        [nzSm]="18"
        [nzXs]="24"
        nzErrorTip="请输入验证码！"
      >
        <div nz-row [nzGutter]="8">
          <div nz-col [nzSpan]="12">
            <input nz-input formControlName="captcha" id="captcha"/>
          </div>
          <div nz-col [nzSpan]="12">
            <button nz-button type="button"
                    (click)="getCaptcha()">{{countdown === 60 ? '获取验证码' : countdown + "秒后重试"}}</button>
          </div>
        </div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="nickname" nzRequired>
        <span>昵称</span>
      </nz-form-label>
      <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="请输入昵称!">
        <input nz-input id="nickname" formControlName="nickname"/>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" nzRequired>密码</nz-form-label>
      <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="密码不能为空，不能小于6位!">
        <input
          nz-input
          type="password"
          id="password"
          formControlName="password"
        />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="checkPassword" nzRequired>确认密码</nz-form-label>
      <nz-form-control [nzSm]="18" [nzXs]="24" [nzErrorTip]="errorTpl">
        <input nz-input type="password" formControlName="checkPassword" id="checkPassword"/>
        <ng-template #errorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">
            请输入确认密码!
          </ng-container>
          <ng-container *ngIf="control.hasError('confirm')">
            您输入的两个密码不一致!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nz-row class="register-area">
      <nz-form-control [nzSpan]="18" [nzOffset]="6" [nzErrorTip]="agreeErrorTpl">
        <label nz-checkbox formControlName="agree">
          <span>我已阅读并同意<a>注册协议</a></span>
        </label>
        <ng-template #agreeErrorTpl let-control>
          <ng-container *ngIf="control.hasError('confirm')">
            注册协议必须勾选!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control class="register-button">
        <button nz-button class="register-form-button" [nzType]="'primary'">注册</button>
        <a class="register-login-button" [routerLink]="'/login'">登录</a>
      </nz-form-control>
    </nz-form-item>
  </form>
  <div class="login-footer">
    如有疑问请联系：<a target="_blank" href="{{systemInfoMap['CONTACT_MAILBOX_URL']}}"
               style="text-decoration:none;">{{systemInfoMap['CONTACT_MAILBOX']}}</a><br/>
    Copyright © Rivamed Corporation, All Rights Reserved {{systemInfoMap['SYSTEM_VERSION']}}
  </div>
</div>
